<template>
  <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item label="分类名称" prop="name">
      <el-input
        v-model="queryParams.name"
        placeholder="请输入分类名称"
        clearable
        @keyup.enter="handleQuery"
      />
    </el-form-item>
    <el-form-item label="所属分类" prop="parentId">
      <el-input
        v-model="queryParams.parentId"
        placeholder="请输入所属分类"
        clearable
        @keyup.enter="handleQuery"
      />
    </el-form-item>
    <el-form-item label="创建时间" prop="createTime">
      <el-date-picker clearable
        v-model="queryParams.createTime"
        type="date"
        value-format="YYYY-MM-DD"
        placeholder="选择创建时间">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { getCurrentInstance, reactive, ref, toRefs } from 'vue';

const { proxy } = getCurrentInstance();

const props = defineProps({
  queryParams: {
    type: Object,
    default: null
  },
  showSearch: {
    type: Boolean,
    default: true
  }
});

const { queryParams, showSearch } = toRefs(props);

const emit = defineEmits(['handleQuery', 'resetQuery']);

// 搜索按钮
const handleQuery = () => {
  emit('handleQuery');
};

// 重置按钮
const resetQuery = () => {
  proxy.resetForm("queryRef");
  emit('resetQuery');
};
</script>

<style scoped>
</style>